<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="100px" :rules="nodeModalRules"
           size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据列" prop="field">
          <el-select v-model="nodeModalForm.field" clearable filterable @change="handleFieldChange" placeholder="选择数据列"
                     class="fixed-icon w_100">
            <el-option v-for="item in nodeModalForm.fields" :key="item.alias" :label="item.alias" :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;">{{ item.DATA_TYPE }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <template v-if="nodeModalForm.type === 'number'">
        <el-col :span="10">
          <el-form-item label="时间转换" prop="numberMethods">
             <el-radio-group v-model="nodeModalForm.numberMethods">
              <el-radio label="numDot">小数位处理</el-radio>
              <el-radio label="numTime">时间转换</el-radio>
              <el-radio label="numString">字符串转换</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="2" v-if="nodeModalForm.numberMethods === 'numDot'">
          <el-form-item label="保留小数" prop="numLen" class="w_100">
            <el-input-number v-model="nodeModalForm.numLen" size="small" :max="6" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="nodeModalForm.numberMethods === 'numTime'">
          <el-form-item label="时间戳类型" prop="numTimeType">
            <el-radio-group v-model="nodeModalForm.numTimeType" size="small">
              <el-radio :label="1">秒级</el-radio>
              <el-radio :label="1000">毫秒级</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="w_100" v-if="nodeModalForm.numberMethods === 'numTime'">
          <el-form-item label="格式类型" prop="timeType">
            <el-select v-model="nodeModalForm.timeType" clearable filterable placeholder="时间格式类型"
                       class="fixed-icon w_100">
              <el-option v-for="item in timeTypeList" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </template>
      <template v-if="nodeModalForm.type === 'varchar'">
        <el-col :span="12">
          <el-form-item label="转换为整数" prop="isNum">
            <el-switch v-model="nodeModalForm.isNum" size="small" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保留小数" prop="numLen" v-if="nodeModalForm.isNum" class="w_100">
            <el-input-number v-model="nodeModalForm.numLen" size="small" :max="6" :min="0" />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
    <el-row :gutter="20">
      <template v-if="(nodeModalForm.type === 'varchar' && !nodeModalForm.isNum) ||
       (nodeModalForm.type === 'number' && nodeModalForm.numberMethods === 'numString') ">
        <el-col :span="4">
          <el-form-item label="前缀" prop="isPrefix">
            <el-switch v-model="nodeModalForm.isPrefix" size="small" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input v-if="nodeModalForm.isPrefix" v-model.trim="nodeModalForm.prefix" placeholder="前缀" />
        </el-col>
        <el-col :span="4" :offset="3">
          <el-form-item label="后缀" prop="isNum">
            <el-switch v-model="nodeModalForm.isSuffix" size="small" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input v-model.trim="nodeModalForm.suffix" v-if="nodeModalForm.isSuffix" placeholder="后缀" />
        </el-col>
      </template>
      <el-col :span="12" v-if="nodeModalForm.type === 'date'">
        <el-form-item label="格式类型" prop="type">
          <el-select v-model="nodeModalForm.timeType" clearable filterable placeholder="时间格式类型"
                     class="fixed-icon w_100">
            <el-option v-for="item in timeTypeList" :key="item" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue"
import { useEtlStore } from "../../../../../store/flowEtl"
import { charType, dateType, numberType } from "../../../../../utils/constant"
import { mtimeTypeList, otimeTypeList, ptimeTypeList } from "../../../../../utils/dict"

export default defineComponent({
  name: "node-config-format",
  props: {
    node: Object,
  },
  components: {},
  setup (props) {
    const etlStore = useEtlStore()
    const nodeList = computed(() => etlStore.nodeList)
    const data_etl = computed(() => etlStore.data_etl)
    const nodeConfigClose = inject("nodeConfigClose")
    const timeTypeList = ref([]);
    const nodeModalForm = ref({
      nodeName: "",
      fields: [],
      field: "",
      type: "",
      timeType: "",
      isNum: false,
      isPrefix: false,
      prefix: "",
      isSuffix: false,
      suffix: "",
      numLen: 0,
      numTimeType: 1,
      numberMethods:"numDot",
    })
    const nodeModal = ref()
    const tableList = ref([])
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入节点名称",
        trigger: "blur",
      },
      field: {
        required: true,
        message: "请选择选择列",
        trigger: "change",
      },
      numTimeType:{
        required: true,
        message: "请选择时间戳类型",
        trigger: "change",
      }
    })
    const handleConfigCancel = () => {
      nodeConfigClose()
    }
    const nodeConfigUpdate = (node) => {
      let fields = node.fields.map(item => {
        if (item.alias === node.field) {
          switch (node.type) {
            case "date":
              item.DATA_TYPE = "varchar"
              break;
            case "varchar":
              if (node.isNum) {
                item.DATA_TYPE = "numeric"
              }
            case "number":
              if(node.numberMethods === 'numDot'){
                item.DATA_TYPE = "numeric"
              }else{
                item.DATA_TYPE = "varchar"
              }
            default:
              break;
          }
        }
        return item
      })
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true
          item.nodeName = node.nodeName
          item.config.fields = fields
          item.config.field = node.field
          item.config.type = node.type
          item.config.timeType = node.timeType
          item.config.isNum = node.isNum
          item.config.numLen = node.numLen
          item.config.isPrefix = node.isPrefix
          item.config.prefix = node.prefix
          item.config.isSuffix = node.isSuffix
          item.config.suffix = node.suffix
          item.config.numLen = node.numLen
          item.config.numTimeType = node.numTimeType
          item.config.numberMethods = node.numberMethods
        }
        return item
      })
      etlStore.setNodeList(nodes)
      nodeConfigClose()
    }
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value)
        } else {
          return false
        }
      })
    }
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        fields: [],
        field: "",
        type: "",
        timeType: "",
        isNum: false,
        isPrefix: false,
        prefix: "",
        isSuffix: false,
        suffix: "",
        numLen: 0,
        numTimeType: 1,
        numberMethods:"numDot"
      }
    }
    const actionList = ref([])
    const handleFieldChange = (val) => {
      if (val) {
        let type = nodeModalForm.value.fields.find(item => item.alias === val).DATA_TYPE
        let regType = type.replace(/[0-9]+/g, "")
        if (numberType.includes(regType)) {
          nodeModalForm.value.type = "number"
        } else if (dateType.includes(regType)) {
          nodeModalForm.value.type = "date"
        } else if (charType.includes(regType)) {
          nodeModalForm.value.type = "varchar"
        } else {
          nodeModalForm.value.type = ""
        }
      }
    }
    onMounted(() => {
      resetForm()
      switch (data_etl.value.db_type) {
        case "PostgreSQL":
          timeTypeList.value = ptimeTypeList
          break;
        case "Oracle":
          timeTypeList.value = otimeTypeList
          break;
        case "MySQL":
          timeTypeList.value = mtimeTypeList
          break;
        default:
          break;
      }
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName || "",
        fields: props.node.config.fields || [],
        field: props.node.config.field || "",
        type: props.node.config.type || "",
        timeType: props.node.config.timeType || "",
        isNum: props.node.config.isNum || false,
        isPrefix: props.node.config.isPrefix || false,
        prefix: props.node.config.prefix || "",
        isSuffix: props.node.config.isSuffix || false,
        suffix: props.node.config.suffix || "",
        numLen: props.node.config.numLen || 0,
        numTimeType: props.node.config.numTimeType || 1,
        numberMethods: props.node.config.numberMethods || 'numDot',
      }
    })
    return {
      nodeList,
      nodeModalForm,
      tableList,
      nodeModalRules,
      nodeModal,
      nodeConfigClose,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      actionList,
      handleFieldChange,
      ptimeTypeList,
      otimeTypeList,
      mtimeTypeList,
      timeTypeList,
      data_etl,
    }
  },
})
</script>

<style scoped>
.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>